<template>
    <NavBar
        :isBack="true"
        :back="back"
        bgColor="#ffff"
        iconUrl="/ui-prod-2.8.0/back.png"
        fontColor="#333333"
        title="我的余额" />
    <view class="balance" :style="{ height: `calc(100vh - ${navBarInfo.navbarHeight}px)` }">
        <view class="balance-top">
            <image :src="getImgOssUrl('/ui-prod-2.11.0/oval.png')" class="balance-img"></image>
            <view class="balance-detail">
                <view class="balance-square">
                    <view class="balance-text">
                        <span class="balance-tips">可用余额（元）</span>
                        <view class="balance-money">{{ floatDivide(Data.balance, 100) || 0 }}</view>
                    </view>
                    <view :class="[Data.balance <= 0 ? 'balance-disabled' : '', 'balance-btn']" @click="cash">
                        提现
                    </view>
                </view>
            </view>
        </view>
        <view class="balance-list">
            <view class="balance-check">
                <text class="balance-param">余额变动明细</text>
                <view class="balance-btn">
                    <button
                        @click="changeTab(index)"
                        v-for="(item, index) in Data.tabList"
                        :key="index"
                        :class="['balance-tab', Data.tab == index ? 'tab-red' : '']">
                        {{ item }}
                    </button>
                </view>
            </view>
            <view class="balance-container">
                <view v-if="Data.dataList.length" class="myIntegral-list">
                    <view
                        v-for="(item, index) in Data.dataList"
                        :key="index"
                        class="integral-item"
                        @click="toDetail(item)">
                        <view class="integral-record">
                            <view class="balance-name">{{ item.type == 1 ? '分销奖励' : '提现' }}</view>
                            <view class="balance-all">
                                <view class="balance-type" v-if="item.amountType == 1">
                                    +{{ floatDivide(item.amount, 100) }}
                                </view>
                                <view class="balance-sub" v-if="item.amountType == 2">
                                    -{{ floatDivide(item.amount, 100) }}
                                </view>
                                <image
                                    v-if="item.type == 2"
                                    :src="getImgOssUrl('/ui-prod-2.8.0/white-jiantou.png')"
                                    class="balance-go"></image>
                            </view>
                        </view>
                        <view class="integral-record">
                            <view class="balance-status">{{ item.recordDate }}</view>
                            <view class="balance-status">{{ item.auditStatusName }}</view>
                        </view>
                    </view>
                </view>
                <view v-else class="no-data">
                    <img class="empty" :src="getImgOssUrl('/ui-prod-2.3.0/empty-addr@2x.png')" />
                    暂无数据
                </view>

                <Loading />
            </view>
            <view class="list-loading" v-if="isBottom && Data.dataList.length">
                {{ listLoading ? '加载中…' : '已经到底啦！' }}
            </view>
        </view>
        <popup ref="popRef" :showIcons="showIcons">
            <template #content>
                <!-- 未开通提现通道 -->
                <template v-if="status == 1">
                    <view class="balance-path">商家未配置提现通道，暂不支持提现</view>
                    <view class="balance-customer">请联系商家客服处理</view>
                    <view class="pop-line"><view class="pop-btn" @click="popRef.closePopup()">关闭</view></view>
                </template>
                <!-- 没有实名认证 -->
                <template v-if="status == 2">
                    <view class="balance-reason">申请提现，请先实名认证</view>
                    <view class="pop-line">
                        <view class="pop-btn" @click="apply"> 立即实名认证 </view>
                    </view>
                </template>
                <!-- 没有创建银行卡-商家未开通【宝付账户自动扣款】 -->
                <template v-if="status == 3">
                    <view class="balance-reason">您还没有创建银行卡</view>
                    <view class="pop-line">
                        <view class="pop-cancel" @click="popRef.closePopup()">取消</view>
                        <view class="pop-btn pop-create" @click="linkbank(1)">立即创建</view>
                    </view>
                </template>
                <!-- 没有创建银行卡-商家开通【宝付账户自动扣款】 -->
                <template v-if="status == 4">
                    <view class="balance-reason">您的宝户通账户暂未绑卡</view>
                    <view class="pop-line">
                        <view class="pop-cancel" @click="popRef.closePopup()">取消</view>
                        <view class="pop-btn pop-create" @click="linkbank(2)">立即绑卡</view>
                    </view>
                </template>
            </template>
        </popup>
        <!-- 提现方式：微信+银行卡 -->
        <uni-popup ref="popupTwo" :mask-click="false">
            <view class="pop-view">
                <view class="pop-title">
                    <span>提现至</span>
                    <image
                        :src="getImgOssUrl('/ui-prod-2.11.0/cancel.png')"
                        class="pop-close"
                        @click="popupTwo.close()"></image>
                </view>
                <view>
                    <view class="pop-wechat" @click="choose(1)">
                        <view class="pop-square">
                            <image :src="getImgOssUrl('/ui-prod-2.11.0/wechat.png')" class="pop-images"></image>
                            <span>微信零钱包</span>
                        </view>
                        <image
                            :src="getImgOssUrl('/ui-prod-2.11.0/choose.png')"
                            class="pop-choose"
                            v-if="isChooseWechat"></image>
                        <image :src="getImgOssUrl('/ui-prod-2.11.0/notChoose.png')" class="pop-choose" v-else></image>
                    </view>
                    <view class="pop-wechat" @click="choose(2)">
                        <view class="pop-square">
                            <image :src="getImgOssUrl('/ui-prod-2.11.0/card.png')" class="pop-images"></image>
                            <span>银行卡</span>
                        </view>
                        <image
                            :src="getImgOssUrl('/ui-prod-2.11.0/choose.png')"
                            class="pop-choose"
                            v-if="isChooseCard"></image>
                        <image :src="getImgOssUrl('/ui-prod-2.11.0/notChoose.png')" class="pop-choose" v-else></image>
                    </view>
                </view>
                <view class="pop-last"><view class="popTwo-btn" @click="next"> 下一步 </view></view>
            </view>
        </uni-popup>
    </view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import router from '@/router';
import request from '@/request';
import store from '@/store';
import NavBar from '@/components/navBar';
import { onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { getImgOssUrl, floatDivide } from '@/commons/utils';
import popup from '../components/popup.vue';
import Loading from '@/components/el-loading';
const navBarInfo = store.useNavBarStore();

let listLoading = ref(false);
let showIcons = ref(false);
let status = ref(3);
const popRef = ref();
const popupTwo = ref();
const Data = reactive({
    dataList: [],
    page: 1,
    perPage: 10,
    scrollTop: 0,
    totalCount: 0,
    balance: 0,
    tab: 0, //0-全部 1-收入 2-支出
    tabList: ['全部', '收入', '支出']
});
let isChooseWechat = ref(false);
let isChooseCard = ref(false);

const choose = param => {
    isChooseWechat.value = false;
    isChooseCard.value = false;
    if (param == 1) {
        isChooseWechat.value = !isChooseWechat.value;
    } else {
        isChooseCard.value = !isChooseCard.value;
    }
};
const getList = async () => {
    listLoading.value = true;
    const { page, perPage } = Data;
    let res = await request('walletList', {
        amountType: Data.tab,
        page: Data.page,
        perPage: Data.perPage
    });
    let list = res.data.list || [];
    Data.totalCount = res.data.totalCount;
    Data.balance = res.data?.balance;
    if (Data.totalCount === Data.dataList.length) {
        listLoading.value = false;
        return;
    }
    if (page === 1) {
        Data.dataList = list;
    } else {
        Data.dataList = Data.dataList.concat(list);
    }
    listLoading.value = false;
};
const changeTab = index => {
    Data.tab = index;
    Data.dataList = [];
    Data.page = 1;
    getList();
};
const next = async () => {
    if (isChooseCard.value || isChooseWechat.value) {
        popupTwo.value.close();
        if (isChooseWechat.value) {
            router.push('/pages-user/balanceCash/cash/towechat');
        }
        if (isChooseCard.value) {
            try {
                await request('walletCheckBankCard').then(async res => {
                    //status 1-非宝付绑定银行卡  3-宝付绑定银行卡
                    if (res.data.status == 1) {
                        // 1-非宝付绑定银行卡
                        const param = await request('autoDeduct');
                        if (param.data.deduct) {
                            // 没有创建银行卡-商家开通【宝付账户自动扣款】
                            status.value = 4;
                            showIcons.value = false;
                            popRef.value.openPopup();
                        } else {
                            // 商家未开通【宝付账户自动扣款】
                            router.push('/pages-user/balanceCash/cash/tocard');
                        }
                    } else {
                        router.push('/pages-user/balanceCash/cash/tocard');
                    }
                });
            } catch (err) {
                const param = await request('autoDeduct');
                if (param.data.deduct) {
                    // 没有创建银行卡-商家开通【宝付账户自动扣款】
                    status.value = 4;
                    showIcons.value = false;
                    popRef.value.openPopup();
                } else {
                    // 没有创建银行卡-商家未开通【宝付账户自动扣款】
                    status.value = 3;
                    showIcons.value = false;
                    popRef.value.openPopup();
                }
            }
        }
    } else {
        uni.showToast({
            title: '请选择提现方式！',
            icon: 'none'
        });
    }
};
const cash = () => {
    if (Data.balance <= 0) return;

    // 未设置提现通道(status:1 showIcons:false)
    // 未实名认证(status:2 showIcons:true)
    // 没有创建银行卡-商家未开通【宝付账户自动扣款】（status:3 showIcons:false)
    // 没有创建银行卡-商家开通【宝付账户自动扣款】（status:4 showIcons:false)
    request('withdrawCheck')
        .then(async res => {
            if (res.data.toWechat && res.data.toBankAccount) {
                isChooseWechat.value = false;
                isChooseCard.value = false;
                popupTwo.value.open('center');
            } else if (res.data.toWechat) {
                router.push('/pages-user/balanceCash/cash/towechat');
            } else if (res.data.toBankAccount) {
                try {
                    await request('walletCheckBankCard').then(async res => {
                        if (res.data.status == 1) {
                            // 1-非宝付绑定银行卡
                            const param = await request('autoDeduct');
                            if (param.data.deduct) {
                                // 商家开通【宝付账户自动扣款】

                                status.value = 4;
                                showIcons.value = false;
                                popRef.value.openPopup();
                            } else {
                                // 商家未开通【宝付账户自动扣款】
                                router.push('/pages-user/balanceCash/cash/tocard');
                            }
                        } else {
                            router.push('/pages-user/balanceCash/cash/tocard');
                        }
                    });
                } catch (err) {
                    const param = await request('autoDeduct');
                    if (param.data.deduct) {
                        // 没有创建银行卡-商家开通【宝付账户自动扣款】
                        status.value = 4;
                        showIcons.value = false;
                        popRef.value.openPopup();
                    } else {
                        // 没有创建银行卡-商家未开通【宝付账户自动扣款】
                        status.value = 3;
                        showIcons.value = false;
                        popRef.value.openPopup();
                    }
                }
            }
        })
        .catch(err => {
            if (err.data.code == 9002001) {
                //未设置提现通道
                status.value = 1;
                showIcons.value = false;
                popRef.value.openPopup();
            }
            if (err.data.code == 9002002) {
                //未实名认证
                status.value = 2;
                showIcons.value = false;
                popRef.value.openPopup();
            }
        });
};
const linkbank = async type => {
    if (type == 2) {
        // 判断商家是否在宝付开户
        let res = await request('isopenAccount');
        if (!res.data.account) {
            // 进行宝付开户
            let data = await request('openAccount');
            if (!data.data.account) {
                uni.showToast({
                    title: '开户失败，请稍后重试！',
                    icon: 'none'
                });
            } else {
                popRef.value.closePopup();
                router.push('/pages-user/balanceCash/cash/linkbank?type=' + type);
            }
        } else {
            popRef.value.closePopup();
            router.push('/pages-user/balanceCash/cash/linkbank?type=' + type);
        }
    } else {
        popRef.value.closePopup();
        router.push('/pages-user/balanceCash/cash/linkbank?type=' + type);
    }
};
const apply = () => {
    popRef.value.closePopup();
    router.push('/pages-user/realName/index');
};
const toDetail = item => {
    if (item.type == 2) {
        router.push('/pages-user/balanceCash/balance/detail?id=' + item.withdrawId);
    }
};
onShow(() => {
    getList();
});
const isBottom = computed(() => {
    return Data.scrollTop > 50;
});
onPageScroll(e => {
    Data.scrollTop = e.scrollTop;
});
// 上拉加载
onReachBottom(() => {
    if (Data.totalCount === Data.dataList.length) {
        return;
    }
    Data.page++;
    getList();
});
const back = () => {
    uni.switchTab({
        url: '/pages/tabbar/user'
    });
};
</script>
<style lang="scss" scope>
.balance {
    .pop-view {
        width: 543rpx;
        height: 449rpx;
        background: #ffffff;
        border-radius: 14rpx;
        .pop-last {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 29rpx;
        }
        .popTwo-btn {
            width: 263rpx;
            height: 65rpx;
            background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
            border-radius: 40rpx;
            font-size: 25rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            line-height: 65rpx;
        }
        .pop-wechat {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 29rpx 36rpx 25rpx 29rpx;
            .pop-square {
                display: flex;
                align-items: center;
            }
            .pop-images {
                margin-right: 22rpx;
                width: 54rpx;
                height: 54rpx;
            }
            .pop-choose {
                width: 36rpx;
                height: 36rpx;
            }
        }
        .pop-title {
            position: relative;
            text-align: center;
            font-size: 31rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #33302d;
            padding: 29rpx;
            border-bottom: 2rpx solid #f5f5f5;
            .pop-close {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                padding: 20rpx;
                width: 22rpx;
                height: 22rpx;
            }
        }
    }
    .balance-reason {
        font-size: 29rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #33302d;
        line-height: 31rpx;
        margin: 31rpx 0 76rpx 0;
        text-align: center;
    }
    .balance-customer {
        font-size: 25rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 36rpx;
        text-align: center;
        padding: 20rpx 0 51rpx 0;
    }
    .balance-path {
        font-size: 29rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #33302d;
        line-height: 31rpx;
    }
    .pop-create {
        margin-left: 29rpx;
        width: 181rpx !important;
    }
    .pop-line {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .pop-cancel {
        width: 181rpx;
        height: 65rpx;
        background: linear-gradient(270deg, #f5f5f5 0%, #e6e6e6 100%);
        border-radius: 40rpx;
        font-size: 25rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 65rpx;
        text-align: center;
    }
    .pop-btn {
        width: 263rpx;
        height: 65rpx;
        line-height: 65rpx;
        text-align: center;
        background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
        border-radius: 40rpx;
        font-size: 25rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
    }
    .balance-top {
        position: relative;
        top: 0;
        height: 359rpx;
        .balance-img {
            width: 100%;
            height: 255rpx;
        }
        .balance-detail {
            position: absolute;
            top: 64rpx;
            margin-left: 50%;
            transform: translateX(-50%);
            width: 692rpx;
            height: 297rpx;
            background-color: #fff;
            border-radius: 14rpx;
            .balance-square {
                padding: 36rpx 0;
                height: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                .balance-text {
                    text-align: center;
                    .balance-tips {
                        font-size: 25rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 25rpx;
                    }
                    .balance-money {
                        font-size: 51rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #333333;
                    }
                }
                .balance-btn {
                    width: 330rpx;
                    height: 80rpx;
                    text-align: center;
                    background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
                    border-radius: 40rpx;
                    font-size: 29rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    line-height: 80rpx;
                    color: #ffffff;
                }
                .balance-disabled {
                    opacity: 0.4;
                }
            }
        }
    }
    .balance-list {
        margin-top: 29rpx;
        padding: 29rpx;
        background-color: #fff;
        background-clip: content-box;
        .list-loading {
            text-align: center;
            color: #999999;
            font-size: 28rpx;
            font-weight: 300;
            line-height: 22rpx;
            padding-bottom: 29rpx;
        }
        .balance-check {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24rpx 29rpx;
            border-bottom: 2rpx solid #f5f5f5;
            .balance-param {
                font-size: 31rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
            }
            .balance-btn {
                display: flex;
            }
            .balance-tab {
                margin-right: 18rpx;

                color: #333333;
                border: 2rpx solid #e2e2e2;
                border-radius: 33px;
                background: #ffffff;

                font-family: PingFangSC-Regular, PingFang SC;
                font-size: 25rpx;
                font-weight: 400;
                line-height: 54rpx;
            }
            .tab-red {
                color: #fe292b !important;
                border: 2rpx solid #fe292b !important;
            }
            .balance-title {
                color: #333333;

                font-family: PingFangSC-Regular, PingFang SC;
                font-size: 31rpx;
                font-weight: 400;
            }
        }
        .balance-container {
            background-color: #ffffff;

            .myIntegral-list {
                padding: 0 29rpx;
                .integral-item:last-child {
                    border-bottom: none;
                }
                .integral-item {
                    padding: 29rpx 0 7rpx 0;

                    border-bottom: 2rpx solid #f5f5f5;

                    .integral-record {
                        display: flex;
                        justify-content: space-between;
                        padding-bottom: 22rpx;
                        .balance-type {
                            font-size: 31rpx;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #33302d;
                        }
                        .balance-sub {
                            font-size: 31rpx;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #fe292b;
                        }
                        .balance-go {
                            margin-left: 18rpx;
                            width: 11rpx;
                            height: 18rpx;
                        }
                        .balance-name {
                            font-size: 31rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                        }
                        .balance-all {
                            display: flex;
                            align-items: center;
                        }
                        .balance-status {
                            font-size: 22rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #999999;
                        }

                        .balance-time {
                            color: #999999;

                            font-family: PingFangSC-Regular, PingFang SC;
                            font-size: 22rpx;
                            font-weight: 400;
                            line-height: 22rpx;
                        }
                    }
                }
            }

            .no-data {
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                height: calc(100vh - 549rpx);
                .empty {
                    width: 279rpx;
                    height: 216rpx;
                }
            }
        }
    }
}
</style>
